<template>
  <div class="vipPage">
    <!-- tabs -->
    <div class="tabsView">
      <Tabs v-model="currentTab">
        <TabPane label="猫眼" name="0"></TabPane>
        <TabPane label="淘票票" name="1"></TabPane>
        <TabPane label="腾讯" name="2"></TabPane>
        <TabPane label="爱奇艺" name="3"></TabPane>
        <TabPane label="哔哩哔哩" name="4"></TabPane>
      </Tabs>
      <!-- 轮播 -->
      <div class="movieView">
        <Button
          class="movieButton"
          :loading="loading"
          shape="circle"
          icon="ios-arrow-back"
          @click="getMovieListData"
        ></Button>
        <div class="movielistView">
          <div class="movieItem" v-for="(item,index) in movieLIst" :key="index">{{item}}</div>
        </div>
        <Button
          class="movieButton"
          :loading="loading"
          shape="circle"
          icon="ios-arrow-forward"
          @click="getMovieListData"
        ></Button>
      </div>
    </div>
    <!-- 视频容器 -->
    <div class="vipView">
      <!-- <iframe
        :src="loadUrl"
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen"
        msallowfullscreen="msallowfullscreen"
        oallowfullscreen="oallowfullscreen"
        webkitallowfullscreen="webkitallowfullscreen"
        id="player-frame"
        width="100%"
        height="100%"
      ></iframe>-->
    </div>
  </div>
</template>

<script>
import common from "../common/common.js";

export default {
  data() {
    return {
      // 头部
      currentTab: "0",
      movieLIst: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      loading: false,
      loadUrl: "https://jx.688ing.com/?search=" // 大海
    };
  },
  created() {
    this.getMovieListData();
  },
  methods: {
    /**
     * 获取猫眼电影列表
     */
    getMovieListData() {
      var self = this;
      this.$ajaxGet(this.$API.movie_my, {
        toekn: "zhj"
      })
        .then(responseData => {
          console.log(responseData);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.vipPage {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0px 8vw 4vw 8vw;
  background-color: white;
}
.tabsView {
  margin: 20px 36px;
  .movieView {
    display: flex;
    align-items: center;
    .movieButton {
      margin: 8px;
    }
    .movielistView {
      flex: 1;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      -webkit-overflow-scrolling: touch;
      .movieItem {
        margin: 0px 12px 0px 0px;
        background-color: rebeccapurple;
        height: 280px;
        width: 210px;
      }
    }
  }
}
.vipView {
  flex: 1;
  width: 100%;
  height: 92vh;
}
</style>
